﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example12.aspx.cs" Inherits="Chapter15.Example12" %>

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>代码清单 15-12 使用 progress 元素</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <link rel="shortcut icon" href="Example01.Favicon.ico" type="image/x-ico" />
</head>
<body>
    <progress id="myprogress" value="10" max="100"></progress>
    <p>
        <button type="button" value="30">30%</button>
        <button type="button" value="60">60%</button>
        <button type="button" value="90">90%</button>
    </p>
    <script>
        var buttons = document.getElementsByTagName('button');
        var progress = document.getElementById('myprogress');

        var clickHandler = function (e) {
            progress.value = e.target.value;
        }
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].onclick = clickHandler
        }
    </script>
</body>
</html>
